.image-card {
  position relative
  box-sizing border-box
  width 100%
  box-shadow 1rem 2rem 3rem var(--shadow-color)
  user-select none

  &.checked
  &:hover {
    box-shadow 0 0 10rem var(--shadow-hover-color)
  }

  .image-box {
    position relative
    width 100%
    height 150rem

    .el-image {
      width 100%
      height 100%
    }
  }


  .info-box {
    position relative
    box-sizing border-box
    width 100%
    margin-top 5rem
    padding 5rem

    .image-info {
      display flex
      flex-direction column
      justify-content space-between
      box-sizing border-box
      width 100%
      height 100%
      color var(--text-color)

      .rename-operate {
        display flex
        align-items center
        justify-content space-between
        height 22rem

        .rename-input {
          width 122rem
        }
      }


      .filename {
        height 18rem
        margin-bottom 6rem
        overflow hidden
        font-size 14rem
        white-space nowrap
        text-overflow ellipsis
      }
    }
  }


  .copy-link-box {
    padding 5rem
  }

  .operation-box {
    position absolute
    top 10rem
    right 8rem
    display flex
    justify-content space-between
    width calc(100% - 16rem)

    .operation-left {
      .picked-btn {
        i {
          font-weight bold
        }
      }
    }

    .operation-right {
      display flex
    }

    .operation-btn {
      display flex
      align-items center
      justify-content center
      width 32rem
      height 32rem
      margin-right 8rem
      font-size 18rem
      background var(--background-color)
      border-radius 50%
      box-shadow 0 0 6rem var(--shadow-color)
      cursor pointer

      &:last-child {
        margin-right 0
      }
    }
  }
}
